<template>
<div>
  <div>
    <div class="divtitleClass">
      <div>
        帐号级别：
        <span v-if="severUserInfo.level === '10'">市</span>
        <span v-if="severUserInfo.level === '20'">区</span>
        <span v-if="severUserInfo.level === '30'">街道</span>
        <span v-if="severUserInfo.level === '40'">社区</span>
        <span v-if="severUserInfo.level === '45'">村</span>
      </div>
      <div>
        帐号归属：
        <span>{{severUserInfo.company_name}}</span>
      </div>
    </div>
    <Button type="success" @click="TemplateModel = true">添加</Button>
    <div style="margin-top: 15px">
      <Table border :columns="templateColumns" :data="templateData" :loading="tableLoading">
        <template slot-scope="{ row, index }" slot="action">
          <span style="color: white">{{row.template_type}}</span>
          <Button type="info" size="small" style="margin-right: 5px" @click="selectTemplateInfo(row)">详情</Button>
          <Button v-if="templateData[index].template_type === '0'" type="info" size="small" style="margin-right: 5px" @click="createGenerateTemplate(row)">生成模板</Button>
          <Button v-if="templateData[index].template_type === '1'" type="primary" size="small" style="margin-right: 5px" @click="createSelectResult(row)">开始查询</Button>
          <Button v-if="templateData[index].template_type === '1'" type="success" size="small" style="margin-right: 5px" @click="getSelectResult(row)">查看结果</Button>
          <Button type="error" size="small" @click="deleteTemplate(row)">删除</Button>
        </template>
      </Table>
    </div>
  </div>
  <Modal
    width="1000"
    :mask-closable="false"
    v-model="TemplateModel"
    title="创建模板基本信息">
    <div class="divtitleClass">
      模板名称
    </div>
      <Input v-model="TemplateInfo.template_name" placeolder="请输入内容" style="width: 300px" />
    <div class="divtitleClass">
      模板描述
    </div>
      <Input v-model="TemplateInfo.template_remarks" placeholder="请输入内容" style="width: 300px" />
    <div class="divtitleClass">
      选择统计场景
    </div>
      <Select v-model="TemplateInfo.select_type" style="width:300px">
        <Option value="people" >人员</Option>
<!--        <Option value="grid" disabled>网格</Option>-->
      </Select>
    <div slot="footer">
      <Button type="success" :loading="ButtonLoading" @click="modelClick">保存</Button>
    </div>
  </Modal>
  <Modal
    width="1000"
    :mask-closable="false"
    v-model="TemplateModelOne"
    title="创建模板">
    <div class="divtitleClass">
      选择筛选条件：
    </div>
    <Table border ref="selection"
           :columns="columnsTable"
           :data="columnsList"
           @on-selection-change="tableSelectChange">
    </Table>
    <div slot="footer">
      <Button type="success" :loading="ButtonLoadingOne" @click="modelClickOne">保存</Button>
    </div>
  </Modal>
  <Modal
    width="1000"
    :mask-closable="false"
    v-model="TemplateModelTwo"
    title="完善筛选条件内容">
    <div>
      <span style="color: red">*</span>
      <span>1.输入内容不要包含空格，及特殊符号</span>
    </div>
    <div>
<!--      <span style="color: red">*</span>-->
<!--      <span>2.选择区间时，将较小的数字放在前面</span>-->
    </div>
    <div v-for="(item,index) in pickColumns" :key="index">
      <div class="divtitleClass">
        {{item.columns_detail}} ( {{item.columns_name}} )
      </div>
      <Row>
        <Col span="3" style="padding-left: 10px">
          <Tag color="primary">{{item.columns_detail}}</Tag>
        </Col>
        <Col span="4">
          <Select v-model="item.support_pick" style="width:100px;margin-right: 10px;margin-left: 10px;text-align: center">
            <Option v-for="(item1,index1) in JSON.parse(item.support)" :key="index1" :value="item1.value">{{item1.label}}</Option>
          </Select>
        </Col>
        <Col span="8">
           <span v-if="item.columns_type === 'input'">
            <Input v-model="item.columns_value" :type="item.value_type === 'String' ? 'text':'number'" placeholder="请输入内容" style="width: 300px" />
           </span>
          <span v-if="item.columns_type === 'select' && item.dict_type === '0'">
            <Select v-model="item.columns_value" style="width:300px">
              <Option v-for="(item1,index1) in JSON.parse(item.dict_info)" :key="index1" :value="item1.value">{{item1.label}}</Option>
            </Select>
          </span>
          <span v-if="item.columns_type === 'cascader' && item.dict_type === '0'" style="flex: auto">
            <Cascader :data="JSON.parse(item.dict_info)" v-model="item.dispose_columns_value" style="width:300px"></Cascader>
          </span>
        </Col>
      </Row>
    </div>
    <div slot="footer">
      <Button type="success" :loading="ButtonLoadingTwo" @click="modelClickTwo">保存</Button>
    </div>
  </Modal>
  <Modal
    width="1000"
    :mask-closable="false"
    v-model="TemplateModelThree"
    title="创建模板">
    <div class="divtitleClass">
      选择统计单位
    </div>
      <CheckboxGroup v-model="company_level">
        <Checkbox label="area_id" border>区</Checkbox>
        <Checkbox label="street_id" border>街道</Checkbox>
        <Checkbox label="community_id" border>社区</Checkbox>
        <Checkbox label="garden_id" border>网格</Checkbox>
      </CheckboxGroup>
    <div slot="footer">
      <Button type="success" :loading="ButtonLoadingThree" @click="modelClickThree">保存</Button>
    </div>
  </Modal>
  <select-info ref="selectInfo"></select-info>
  <template-detail ref="templateDetail"></template-detail>
</div>
</template>
<script>
import {
  deleteTemplate,
  findColumnsList,
  findTemplateList,
  createGenerateTemplate,
  saveTemplate,
  saveTemplateDetail
} from '../../api/grid-statistics'
import SelectInfo from './components/select-info'
import TemplateDetail from './components/template-detail'

export default {
  name: 'index',
  components: { TemplateDetail, SelectInfo },
  data () {
    return {
      aa: [],
      tableLoading: false, // aa
      severUserInfo: {},
      templateColumns: [
        {
          title: '模板编码',
          key: 'code'
        },
        {
          title: '模板名称',
          key: 'template_name'
        },
        {
          title: '模板描述',
          key: 'template_remarks'
        },
        {
          title: '模板状态',
          key: 'template_type'
        },
        {
          title: '创建时间',
          key: 'create_time'
        },
        {
          title: '操作',
          slot: 'action',
          width: 300,
          align: 'center'
        }
      ],
      templateData: [],
      TemplateModel: false,
      ButtonLoading: false,
      TemplateModelOne: false,
      ButtonLoadingOne: false,
      TemplateModelTwo: false,
      ButtonLoadingTwo: false,
      TemplateModelThree: false,
      ButtonLoadingThree: false,
      TemplateInfo: {
        code: '',
        template_name: '',
        template_remarks: '',
        select_type: ''
      },
      columnsTable: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '选项名称',
          key: 'columns_detail'
        },
        {
          title: '字段名称',
          key: 'columns_name'
        }
      ],
      columnsList: [],
      pickColumns: [],
      company_level: []
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
  },
  methods: {
    init () {
      this.tableLoading = true
      let _this = this
      setTimeout(function () {
        findTemplateList().then(ret => {
          if (ret.data.errcode === 0) {
            _this.templateData = ret.data.data
            _this.tableLoading = false
          } else {
            _this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
          }
        })
      }, 1000)
    },
    // 创建模板
    modelClick () {
      this.ButtonLoading = true
      let data = this.TemplateInfo
      saveTemplate(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.TemplateInfo.code = ret.data.data
          this.ButtonLoading = false
          this.TemplateModel = false
          this.init()
          this.TemplateModelOne = true
          this.findColumnsList()
        } else {
          this.$Notice.error({ title: '保存失败！', desc: ret.data.errmsg })
          this.ButtonLoading = false
        }
      })
    },
    // 查询可选择字段
    findColumnsList () {
      findColumnsList().then(ret => {
        if (ret.data.errcode === 0) {
          this.columnsList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    // 选择字段
    tableSelectChange (e1, e2) {
      this.pickColumns = e1
    },
    // 保存字段
    modelClickOne () {
      if (this.pickColumns.length === 0) {
        this.$Notice.error({ title: '保存失败！', desc: '未选择筛选条件！' })
        return
      }
      this.ButtonLoadingOne = true
      this.TemplateModelTwo = true
      this.TemplateModelOne = false
      this.ButtonLoadingOne = false
    },
    // 保存字段详细内容
    modelClickTwo () {
      this.ButtonLoadingTwo = true
      let data = {
        code: this.TemplateInfo.code,
        list: this.pickColumns,
        type: '0'
      }
      data.list.forEach(item => {
        if (item.columns_type === 'cascader') {
          let value = item.dispose_columns_value[item.dispose_columns_value.length - 1]
          item.columns_value = value
        }
      })
      saveTemplateDetail(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.ButtonLoadingTwo = false
          this.TemplateModelTwo = false
          this.TemplateModelThree = true
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
          this.ButtonLoadingTwo = false
        }
      })
    },
    // 保存分组条件
    modelClickThree () {
      this.ButtonLoadingThree = true
      let list = []
      this.company_level.forEach(item => {
        list.push({
          columns_name: item,
          table_name: 'audit_grid_user',
          columns_detail: this.disposeCompany(item)
        })
      })
      let data = {
        code: this.TemplateInfo.code,
        list: list,
        type: '1'
      }
      saveTemplateDetail(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.ButtonLoadingThree = false
          this.TemplateModelThree = false
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
          this.ButtonLoadingThree = false
        }
      })
    },
    // 处理分组条件
    disposeCompany (e) {
      if (e === 'area_id') {
        return '区'
      }
      if (e === 'street_id') {
        return '街道'
      }
      if (e === 'community_id') {
        return '社区'
      }
      if (e === 'garden_id') {
        return '网格'
      }
    },
    // 删除
    deleteTemplate (e) {
      let data = {
        code: e.code
      }
      deleteTemplate(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '删除成功', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '删除失败', desc: ret.data.errmsg })
        }
      })
    },
    // 生成模板
    createGenerateTemplate (e) {
      let data = {
        code: e.code
      }
      createGenerateTemplate(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '生成成功！', desc: ret.data.errmsg })
          this.init()
        } else {
          this.$Notice.error({ title: '生成失败！', desc: ret.data.errmsg })
        }
      })
    },
    // 开始查询
    createSelectResult (e) {
      this.$refs.selectInfo.createSelectResult(e, '1')
    },
    // 查看结果
    getSelectResult (e) {
      this.$refs.selectInfo.createSelectResult(e, '2')
    },
    // 详情---查看模板信息
    selectTemplateInfo (e) {
      this.$refs.templateDetail.init(e)
    }
  }
}
</script>

<style scoped>
.divtitleClass{
  background-color: rgb(236, 248, 255);
  border-left: 5px solid rgb(80, 191, 255);
  border-radius: 4px;
  font-size: 16px;
  margin: 15px 0px;
  padding: 8px 12px;
  width: 100%;
}
</style>
